import './assets/css/global.css'
import Map from './assets/js/map'
import audioPlay from './assets/js/sound'
import wx from './assets/js/wxUtil'
let sound = audioPlay()
const CENTER = [30.19637640408235, 120.18273066611019];
let iMap = new Map({
  id: 'mapid',
  center: CENTER,
  zoom: 13,
  tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  click: onMapClick
})

let imageUrl = `${LOCAL_ROOT}static/image/template.jpeg`
let imageBounds = [
  [30.161603, 120.150604],
  [30.224217, 120.228367]
]
L.imageOverlay(imageUrl, imageBounds).addTo(iMap.getMap());

var popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(iMap.getMap());
}

// L.marker([30.19637640408235, 120.18273066611019]).addTo(map)
//   .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
//   .openPopup();

iMap.addMarker(CENTER, {
  url: `${LOCAL_ROOT}static/image/point.jpg`,
  click: function (e) {
    document.title = '小故事'
    document.getElementById('mapid').style.height = '50vh'
    iMap.resizeContainer()
    iMap.setCenterAndZoom(CENTER, 15)
    document.querySelector('.dialog-window').style.display = '';
  }
})

let icon = iMap.createIcon(`${LOCAL_ROOT}static/image/sound.jpg`, {
  iconSize: [40, 20],
  iconAnchor: [0, 20]
});

iMap.addMarker(CENTER, {
  icon,
  click: function (e) {
    // alert('aaa')
    sound.setSrc(`${LOCAL_ROOT}static/sound/10418`);
    sound.replay()
  }
})

let marker = iMap.createMarker([30.222437, 120.17292], {
  icon: iMap.createIcon(`${LOCAL_ROOT}static/image/point_mw.jpg`),
  // draggable: true
});

marker.on('click', e => {
  //document.querySelector('.dialog-window').style.display = '';
  wx.navigateTo({
    url: '../beautifulGoods/good'
  })
})

document.getElementById('testcheck').addEventListener('change', function (e) {
  wx.postMessage({
    data: {
      msg: '显示点'
    }
  })
  if (this.checked) {
    marker.addTo(iMap.getMap())
  } else {
    marker.remove()
  }
})

document.getElementById('dialog-close').addEventListener('click', e => {
  document.getElementById('mapid').style.height = ''
  iMap.resizeContainer()
  document.querySelector('.dialog-window').style.display = 'none';
  iMap.setCenterAndZoom(CENTER, 13)
});
